<template>
  <div style="height:100%;width:100%;z-index:2;position:absolute;">
    <div :class="lineObj.className" style="height:100%;width:100%;"></div>
  </div>
</template>

 <script>
export default {
  name: "barEchart",
  data(){
    return{
    }
  },
  props: {
  lineObj: {
    type: Object,
    default: () => {
      return {
        className: "lineCanvas"
      };
    }
  },
    trendTimeArea:{},
  },
  watch:{
    lineObj:{
      immediate:true,
      handler(val){
        if(val.className != "lineCanvas"){
          setTimeout(()=>{
            this.getLine(val)
          },300)
        }
      }
    },
  },
  methods: {
    getLine(val) {

     let data = [];
     let max = '';
     let min = '';
     val.dataDtlList.map((item,index)=>{
       data.push(item.data)
       max = Math.max.apply(null,data);
       min = Math.min.apply(null,data);
     })
      const that = this;
      var myChart = this.$echarts.init(  document.querySelector("." + val.className));
      let option = {
        title: {
            text:val.areaName ,
            textStyle:{
                   fontStyle:'normal',     //风格
                   fontWeight:'normal',    //粗细
                   fontSize:14,     //大小
                 },
            x:'center',
        },
      tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            },
          formatter:function(params){
          　var res = params[0].name.substring(0,2)+'年'+ params[0].name.substring(2,4)+'月';
          　　　　for (var i = 0; i < params.length; i++) {
          　　　　　　res += "<br>"+params[i].marker+'20'+res+'完成'+params[i].value+'万元'
          　　　　}
            return res
          },

          },
        grid: {
          left: "0px",
          right: "0px",
          bottom:'20px',
          top:'40px',
         },
        xAxis: {
          type: 'category',
          // boundaryGap: false,
          // data: val.lastYearLjIncomeList.xAxis,
		      data:that.trendTimeArea,
          axisLabel: {
            interval:0,
            // rotate:40 ,
            textStyle: {
               // color: '#c3dbff',  //更改坐标轴文字颜色
               fontSize : 10      //更改坐标轴文字大小
             }
            },

          },
        yAxis:
              {
                  type: 'value',
                  // min: minNumber,
                  splitLine:{show: false},  //去除网格线
                  max:max,
                  min:min,
                  // // interval: 50,
                  axisLabel: {
                      formatter: '{value} 万元',
                      show:false
                  },
                  splitArea:{
                      show:true,
                      areaStyle:{
                            color:'transparent',
                      },
                  },
                  axisTick:{ //y轴刻度线
                      show:false
                  },
                  axisLine:{ //y轴
                      show:false
                  },
              },


        series:
          {
            type: "line",
            smooth: true,
            data:data,
            lineStyle: {
                   normal: {
                       color: "#00b050", // 线条颜色
                       width: 0.8
                   }
            },
            itemStyle : {
              normal: {
                label : {
                  show: true,
                  position: 'top',
                  textStyle: {
                     color: '#00b050',
                    fontSize :8,
                   },

                  },
               },
            },
          },
      };
      myChart.setOption(option);
    }
  },
};
 </script>

 <style>
 </style>
